<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
    <meta charset="UTF-8" />
</head>
<body>
    <h1>斗地主前端debug测试</h1>
    <div>
        账号:<input id="id"/>
        昵称:<input id="name"/>
    </div>

    <div>
        <button onclick="connectServer()">连接服务器</button>
        <button onclick="createRoom()">创建房间</button>
        <button onclick="operationRoom(0,0)">加入房间</button>
        房间号:<input id="roomId" />
        <button onclick="operationRoom(0,1)">退出房间</button>
        <button onclick="startGame();">开始游戏</button>
        <div id="myRoom">
            <div>已加入房间:<label id="roomName"></label></div>
            <div>
                <div>当前玩家列表:</div>
                <div id="playerList">

                </div>
            </div>
        </div>
        <div>
            <div>房间列表</div>
            <div id="roomList">
                <div class="roomBox">
                    <div class="roomName"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="output"></div>

    <script>
        let socket;
        let pokerList,dipaiList;
        let sendPokerList=Array();  //记录出牌的数组
        let players;    //玩家队列
function connectServer(){
    socket = new WebSocket("ws://192.168.172.1:10000/ws-example");

    socket.onopen = (event) => {
        console.log("WebSocket connection opened.");

        const message = {
            "order":0,
            "name":document.getElementById("name").value,
            "id":document.getElementById("id").value
        };
        socket.send(JSON.stringify(message));
    };

    socket.onmessage = (event) => {
        const json=JSON.parse(event.data);
        console.log(json);
        switch(json.order){
            case 0:
                if(json.roomId==""){break;}
                document.getElementById("output").innerText="房间创建成功！房间号:"+json.roomId;
                document.getElementById("roomName").innerText=json.roomId;
                document.getElementById("roomId").value=json.roomId;
                break;
            case 1:
                let p=document.getElementById("playerList");
                p.innerHTML="";
                p.style.visibility="none";
                for(let i=0;i<json.players.length;i++){
                    let box = document.createElement("div");
                    let name = document.createElement("label");
                    name.innerText=json.players[i].name;
                    box.appendChild(name);
                    let id=document.createElement("label");
                    id.innerText=json.players[i].id;
                    box.appendChild(id);
                    p.appendChild(box);
                }
                break;
            case 2:
                alert(json.result?"成功":"失败");
                break;
            case 3:
                gameProcessing(json);
                break;
        }
    };

    socket.onclose = (event) => {
        if (event.wasClean) {
            console.log(`WebSocket connection closed, code: ${event.code}, reason: ${event.reason}`);
        } else {
            console.error("WebSocket connection unexpectedly closed");
        }
    };

    socket.onerror = (error) => {
        console.error("WebSocket error:", error);
    };
}
function gameProcessing(json){
    switch(json.mode){
        case 0:
            //获取手牌
            pokerList=json.poker;
            dipaiList=json.dipai;
            players=json.players;
            console.log("已重新洗牌发牌，开始叫分");
            console.log(players[json.start].name+"先开始叫分");
            break;
        case 1:
            const result=json.result;
            if(!result){return;}
            const index=json.index;
            const nextIndex=json.nextIndex;
            const idList=json.idList;

            console.log("玩家"+players[index].name+"出了牌:");
            for(let i=0;i<idList.length;i++){
                for(let j=0;j<pokerList.length;j++){
                    if(pokerList[j].id==idList[i]){
                        console.log(pokerList[j].name);
                    }
                }
            }
            console.log("轮到玩家"+players[nextIndex].name+"出牌:");
            break;
        case 2:
            let status=json.status;
            if(status==0){
                console.log("玩家"+players[json.index].name+"叫了"+json.score+"分");
                if(json.nextIndex>2){
                    console.log("没有选出地主，重新洗牌发牌");
                }else{
                    console.log("轮到玩家"+players[json.nextIndex].name+"叫分");
                }
            }else{
                console.log("叫分结束，玩家"+players[json.landlord].name+"成为地主，开始打牌");
                console.log(players[json.landlord].name+"最先出牌");
            }
            break;
    }
}

function speakScore(score){
    //叫分
    const message = {
        "order":3,
        "roomId":document.getElementById("roomId").value,
        "game":0,
        "mode":2,
        "cmd":1,
        "score":score
    };
    // console.log(JSON.stringify(message));
    socket.send(JSON.stringify(message));
}

function sendPoker(){
    //出牌
    const message = {
        "order":3,
        "roomId":document.getElementById("roomId").value,
        "game":0,
        "mode":2,
        "cmd":0,
        "idList":sendPokerList
    };
    // console.log(JSON.stringify(message));
    socket.send(JSON.stringify(message));
}

function operationRoom(mode,operation){

    const message = {
      "order":3,
      "roomId":document.getElementById("roomId").value,
        "mode":mode,
      "game": 0,    //默认斗地主
      "operation":operation   //加入房间
    };
    console.log(JSON.stringify(message));
    socket.send(JSON.stringify(message));
}

function startGame(){
    const message = {
        "order":3,
        "roomId":document.getElementById("roomId").value,
        "game":0,
        "mode":1
    };
    socket.send(JSON.stringify(message));
}

function createRoom(){
	const message = {
		"order":2,
		"game":0
	};
	socket.send(JSON.stringify(message));
}
    </script>
</body>
</html>
